import { defineStore, storeToRefs } from "pinia";
import { usePersistStore } from "@/stores";
import { ref } from "vue";
//TODO:员工年龄的增长
export const useEmplyeeStore = defineStore("emplyee", () => {
  const persistStore = usePersistStore();
  const { emplyeeList } = storeToRefs(persistStore);
  //员工搜索表单
  const emplyeeQueryData = ref({
    name: "",

    job: null,

    page: 1,
    pageSize: 5,
  });
  //员工条件查询表单的清空
  const clearEmp = () => {
    emplyeeQueryData.value = {
      name: "",

      job: null,

      page: 1,
      pageSize: 5,
    };
    console.log(emplyeeQueryData.value);
  };
  //员工条件查询
  const empAdddrawer = ref(false);
  const empDrawerTitle = ref();
  //TODO: 员工条件查询请求;
  const searchEmp = () => {
    console.log(emplyeeQueryData.value);
    console.log("发起员工条件查询请求");
  };

  const empSizeChange = (pageSize) => {
    emplyeeQueryData.value.page = 1;
    emplyeeQueryData.value.pageSize = pageSize;
    console.log("pageSize改变了", emplyeeQueryData.value);
  };
  const empPageChange = (page) => {
    emplyeeQueryData.value.page = page;
    console.log("page改变了", emplyeeQueryData.value);
  };
  //员工删除
  const empDelete = (row) => {
    ElMessageBox.confirm("你确定要删除这条信息吗?", "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        //TODO: 员工删除请求
        console.log(row);
        emplyeeList.value = emplyeeList.value.filter(
          (item) => item.id != row.id
        );
        console.log("开始员工删除请求");
        ElMessage.success("删除成功");
      })
      .catch(() => {
        ElMessage.success("取消删除");
      });
  };
  //员工添加和修改的表单数据
  const empAddFormData = ref({
    name: "",
    emplyeeId: "",

    job: null,

    id: "",
  });
  //员工添加和修改表单数据的校验
  const addRules = {
    name: [
      { required: true, message: "请输入员工姓名", trigger: "blur" },
      { min: 1, max: 10, message: "员工姓名长度必须位1-10位", trigger: "blur" },
    ],
    emplyeeId: [
      { required: true, message: "请输入员工工号", trigger: "blur" },
      {
        pattern: /^\d{7}$/,
        message: "员工工号长度必须是7位的数字",
        trigger: "blur",
      },
    ],

    job: [{ required: true, message: "请选择员工职位", trigger: "change" }],
    phoneNum: [
      { required: true, message: "请选择员工手机号", trigger: "blur" },
      {
        pattern:
          /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
        message: "请输入正确的手机号码",
        trigger: "blur",
      },
    ],

    //TODO:身份证号码的正则验证
    id: [
      { required: true, message: "请输入员工身份证号", trigger: "blur" },
      {
        pattern:
          /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
        message: "员工的身份证号码必须是18位的数字",
        trigger: "blur",
      },
    ],
  };
  //员工编辑
  const number = ref(0);
  const idx = ref("");
  const empEdit = (row) => {
    console.log(row);
    empAdddrawer.value = true;
    number.value = 1;
    //TODO:员工信息的回显
    for (let i = 0; i < emplyeeList.value.length; i++) {
      if (emplyeeList.value[i].emplyeeId == row.emplyeeId) {
        idx.value = i;
        emplyeeList.value[i];
        empAddFormData.value = { ...emplyeeList.value[i] };
      }
    }
    empDrawerTitle.value = "编辑员工";
  };
  //员工添加
  const empAdd = () => {
    empAdddrawer.value = true;
    empDrawerTitle.value = "添加员工";
  };

  //员工添加和编辑的提交
  const handleSubmit = async () => {
    //表单数据的验证
    await empAddForm.value.validate();
    if (number.value == 1) {
      //TODO:开始员工编辑请求
      console.log("提交编辑的员工信息");
      emplyeeList.value[idx.value] = { ...empAddFormData.value };
      ElMessage.success("编辑成功");
    } else {
      //TODO:开始员工添加请求
      console.log("提交添加的员工信息");
      emplyeeList.value.push(empAddFormData.value);
      ElMessage.success("添加成功");
    }
    empAddFormData.value = {
      name: "",
      emplyeeId: "",
      phoneNum: "",
      job: null,
      id: "",
    };
    empAdddrawer.value = false;
    number.value = 0;
  };
  const empAddForm = ref();
  //员工添加和修改表单的清空
  const clearDrawEmpForm = () => {
    empAddFormData.value = {
      name: "",
      emplyeeId: "",

      job: null,

      id: "",
    };
  };

  return {
    emplyeeQueryData,
    empAdddrawer,
    empAddFormData,
    empAddForm,
    addRules,
    empAdd,
    empEdit,
    empPageChange,
    empSizeChange,
    empDelete,
    clearDrawEmpForm,
    handleSubmit,
    searchEmp,
    clearEmp,
  };
});
